<template>
  <div class="cateparams">
    <bread-crumb :titles="crumbTitle" :path="crumbPath"></bread-crumb>
    <el-card>
      <el-alert
        title="注意级联选择器只能选择第三级"
        type="warning"
        show-icon
      ></el-alert>
      <el-row>
        <el-col>
          <span style="margin-right:10px">选择商品分类</span>
          <el-cascader
            :options="cateList"
            :props="cateProps"
            v-model="selectedCates"
            @change="selectCate"
          ></el-cascader>
        </el-col>
      </el-row>
      <tab
        ref="tabRef"
        :paneRules="TabPaneRules"
        @tabChange="handleTabchange"
        :tableData="activeName == 'many' ? paramsDynamicData : paramsStaticData"
        @handleTabAddClick="handleTabAddClick"
        @editClick="editButtonClick"
      ></tab>
    </el-card>

    <!-- 添加属性对话框 -->
    <Dialog
      ref="dialogRef"
      :dialogTitle="dialogtitle"
      :dialogFormlabelName="dialogFormlabelName"
      :FormData="dialogFormData"
      :FormRules="dialogFormRules"
      @confirmAddParams="confirmAddParams"
    ></Dialog>
  </div>
</template>

<script>
import Dialog from "./children/Dialog";
import BreadCrumb from "@/components/BreadCrumb";
import Tab from "@/components/Tab";
export default {
  name: "Cateparams",
  computed: {
    dialogtitle() {
      if (this.flag == 1) {
        if (this.activeName == "many") {
          return "添加属性";
        } else {
          return "添加元素";
        }
      } else {
        if (this.activeName == "many") {
          return "编辑属性";
        } else {
          return "编辑元素";
        }
      }
    },
    dialogFormlabelName() {
      if (this.activeName == "many") {
        return "属性名称";
      } else {
        return "元素名称";
      }
    }
  },
  data() {
    return {
      flag: 1, //用来区分dialog标题是谁点击的
      crumbTitle: ["首页", "商品管理", "商品参数"],
      crumbPath: { path: "/home" },
      //商品分类数据的来源和配置
      cateList: [],
      cateProps: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
        expandTrigger: "hover"
      },
      selectedCates: [], //选中的值
      TabPaneRules: [
        { label: "动态参数", name: "only" },
        { label: "静态参数", name: "many" }
      ],
      paramsDynamicData: [],
      paramsStaticData: [],
      activeName: "many",
      param: null, //分类参数
      //对话框表单输入数据以及规则
      dialogFormData: {
        attr_name: ""
      },
      dialogFormRules: {
        attr_name: [{ required: true, message: "请输入东西", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    //获取商品数据
    getCateList() {
      this.$http
        .get("categories")
        .then(res => {
          if (res.data.meta.status == 200) {
            this.cateList = res.data.data;
            // console.log(this.cateList)
          } else {
            this.$message.error("获取商品分类数据失败");
          }
        })
        .catch(err => err);
    },
    //选择级联选择框
    selectCate() {
      if (this.selectedCates.length != 3) {
        this.selectedCates = [];
        //同时需将参数的数据重新情况 防止选择了2级或1级菜单 但是 表格里面的数据仍然有
        this.paramsDynamicData = [];
        this.paramsStaticData = [];
        this.$refs.tabRef.isisdisable = true;
        return;
      } else {
        //将tabs组件的按钮渲染为可点击
        this.$refs.tabRef.isdisable = false;
        // tabs需要展示的数据 id是cascader里面得到的id用来指定获取的数据 name和tabs有关 表示展示哪个tab的数据
        let id = this.selectedCates[2];
        this.activeName = this.$refs.tabRef.activeName;
        this.$http
          .get(`categories/${id}/attributes`, {
            params: {
              sel: this.activeName
            }
          })
          .then(res => {
            if (res.data.meta.status == 200) {
              let datas = res.data.data;

              datas.forEach(item => {
                item.attr_vals = item.attr_vals
                  ? item.attr_vals.split(" ")
                  : [];
                item.inputVisible = false; //用来控制每个expand下的input标签的状态
                item.inputValue = ""; //用来控制每个expand下的input标签的输入
              });
              console.log(datas);
              if (this.activeName == "many") {
                this.paramsDynamicData = datas;
              } else {
                this.paramsStaticData = datas;
              }
            } else {
              this.$message.error("获取分类参数列表失败");
            }
          })
          .catch(err => err);
      }
    },
    //点击tab触发 但是处理函数一样 不同的是传的name可动态
    handleTabchange() {
      this.selectCate();
    },
    handleTabAddClick() {
      this.$refs.dialogRef.dialogVisiable = true;
      this.flag = 1;
    },
    //添加参数
    confirmAddParams() {
      if (this.flag == 1) {
        this.$refs.dialogRef.$refs.formRef.$refs.form.validate(valid => {
          if (valid) {
            this.$http
              .post(`categories/${this.selectedCates[2]}/attributes`, {
                attr_name: this.dialogFormData.attr_name,
                attr_sel: this.activeName
              })
              .then(res => {
                this.$refs.dialogRef.dialogVisiable = false;
                if (res.data.meta.status == 201) {
                  this.$message.success("添加参数成功");
                  this.handleTabchange();
                } else {
                  this.$message.error("失败了");
                }
              })
              .catch(err => err);
          }
        });
      } else {
        this.$http
          .put(
            `categories/${this.selectedCates[2]}/attributes/${this.param.attr_id}`,
            {
              attr_name: this.dialogFormData.attr_name,
              attr_sel: this.activeName
            }
          )
          .then(res => {
            this.$refs.dialogRef.dialogVisiable = false;
            if (res.data.meta.status == 200) {
              this.$message.success("修改数据成功");
              this.handleTabchange();
            } else {
              this.$message.error("失败了");
            }
          })
          .catch(err => err);
      }
    },
    //点击编辑按钮
    editButtonClick(param) {
      this.param = param;
      this.flag = 2;
      this.$refs.dialogRef.dialogVisiable = true;
      this.$http
        .get(`categories/${this.selectedCates[2]}/attributes/${param.attr_id}`)
        .then(res => {
          if (res.data.meta.status == 200) {
            this.dialogFormData.attr_name = res.data.data.attr_name;
          } else {
            this.$message.error("获取信息失败");
          }
        })
        .catch(err => err);
    }
  },
  components: {
    BreadCrumb,
    Tab,
    Dialog
  }
};
</script>

<style lang="scss" scoped></style>
